<script setup lang='ts'>
interface Props {
  data: ISportsFollowBetList
}

defineOptions({ name: 'AppSportsBetsFeedFollowBetSlip' })
const props = defineProps<Props>()
// console.log("🚸🚸🚸 ~ props:", props.data)

const sportsStore = useSportsStore()

const betButton = ref()

const curName = computed(() => getCurrencyConfigByCode(props.data.cur).name)
const eventName = computed(() => `${props.data.bi[0].htn} - ${props.data.bi[0].atn}`)
const marketName = computed(() => {
  let title = ''
  const dataObj = props.data.bi[0]
  if (dataObj.bt === 1)
    title = `(${dataObj.hdp}) ${dataObj.sn}`
  // 总分
  else if (dataObj.bt === 2)
    title = `${dataObj.sn} ${dataObj.hdp}`
  // 独赢
  else if (dataObj.bt === 3 || dataObj.bt === 4)
    title = dataObj.sn

  return `${props.data.bi[0].btn}, ${title}`
})
const cartInfo = computed(()=>{
  const dataObj = props.data.bi[0]
  return getCartObject(dataObj,dataObj,dataObj)
})

function addToCart(){
  // TODO:只有1才能进行下注
  if(props.data.bi[0].reb !==1)
    return

  if (sportsStore.cart.checkWid(cartInfo.value.wid)) {
    sportsStore.cart.remove(cartInfo.value.wid)
  }
  else {
    sportsStore.cart.add(cartInfo.value)
    startDomTransition()
  }
}
function startDomTransition() {
  nextTick(() => {
    const startDom = betButton.value
    const endDom = document.getElementById('bet-slip-header-total')

    if (!startDom || !endDom)
      return

    domTransition(startDom, endDom)
  })
}
</script>

<template>
  <div
    class="text-[var(--color-text-white-0)] rounded-[8px] flex overflow-hidden bg-[var(--color-bg-black-3)] mb-[16px]">
    <div class="flex-1 p-[8px] text-[12px] min-w-0 font-semibold leading-[16px]">
      <div class="mb-[8px]">
        <div class="title">
          <div class="w-[16px] h-[16px] flex items-center p-[2px] mr-[4px] flex-none">
            <AppImage :url="data.bi[0].spic" is-network>
              <BaseIcon class="text-[16px]" name="uni-vector" />
            </AppImage>
          </div>
          <span>{{ eventName }}</span>
        </div>
      </div>
      <div>
        <div>
          <div class="flex text-[12px] font-semibold leading-[16px] mb-[8px] justify-between">
            <div class="market-name">
              <span>{{ marketName }}</span>
            </div>
            <span class="ml-[24px] flex-none">{{ data.ov }}</span>
          </div>
          <div class="flex text-[12px] font-semibold leading-[16px] mb-[8px] justify-between opacity-50">
            <span>{{ $t('bet_amount_label') }}{{ $t('colon') }}{{ data.a }} {{ curName }}</span>
          </div>
          <div class="flex text-[12px] font-semibold leading-[16px] mb-[8px] justify-between opacity-50">
            <span class="flex items-center">
              {{ $t('sports_expected_profit') }}{{ $t('colon') }}{{ data.mwa }} {{ curName }}
            </span>
            <div class="flex items-center">
              <span>{{ data.mu }}</span>
            </div>
          </div>
        </div>
        <!-- 串关 -->
        <div class="overflow-hidden duration-[0.25s]"
          style="height: 0px; overflow: hidden; display: none; transition: height 0.25s;"></div>
      </div>
    </div>
    <div ref="betButton" @click="addToCart" class="cursor-pointer w-[40px] bg-[var(--color-brand)] flex items-center justify-center text-[14px]"
      style="--tg-base-icon-color:#000;">
      <BaseIcon name="uni-plus" />
    </div>
  </div>
</template>

<style lang='scss' scoped>
.title {
  width: 100%;
  display: flex;
  font-size: 12px;
  max-width: 100%;
  align-items: flex-start;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0.5;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

.market-name {
  width: 100%;
  display: flex;
  font-size: 12px;
  max-width: 100%;
  align-items: flex-start;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}
</style>
